<template>
        <view class="body-view">
            <view class="scroll_view">
                <scroll-view :class="currentTab<2?'top-menu-view':'top-menu-view top-menu-view2'" scroll-x="true" :scroll-left="scrollLeft">
                    <block v-for="(menuTab,index) in menuTabs" :key="index">
                        <view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
                            <view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
                                <view :class="currentTab>1?'menu-one-txt':'menu-one-txt2'">{{menuTab.name}}</view>
                                <view class="menu-one-bottom">
                                    <view class="menu-one-bottom-color"></view>
                                </view>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>

            <course-index type="type" v-if="currentTab==2"></course-index>
            <course-index type="my" v-if="currentTab==4"></course-index>

            <videoplay @share="share" v-if="currentTab==0"></videoplay>
            <videoplay @share="share" only-follow="1" v-if="currentTab==1"></videoplay>
            <saystory @share="share" v-if="currentTab==2"></saystory>
            <my @changeTab="changeTab()" :show="show" @share="share" v-if="currentTab==4"></my>

        </view>
</template>

<script>
    import saystory from "../../pages/story/index.vue"
    import videoplay from "../find/index.vue"
    import my from "../../pages/my/index.vue"
    import CourseIndex from "../../components/course/index"
    import Request from '@/utils/request.js'

    export default {
        name: "index",
        components:{
          CourseIndex,
            my,videoplay,saystory
        },
        data() {
            return {
                show:1,
                shareContent:{},
                scrollLeft: 0,
                isClickChange: false,
                currentTab: 0,
                  menuTabs: [{
                    name: '发现'
                  }, {
                    name: '关注'
                  }, {
                    name: '读绘本'
                  }, {
                    name: '听故事'
                  }, {
                    name: '我的'
                  }],
                swiperDateList: [[],[],[],[],[],[]]
            }
        },
        onLoad: function(data) {

              setTimeout(()=>{
                this.showAd();
              },15000)


              uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                  console.log(res,'gps');
                },
              });

            console.log(data,'onload');

            let record_id=0;
            if(data.scene){
              record_id = data.scene;
            }else if(data.id){
              record_id = data.id;
            }

            if(data.app_id){
              uni.setStorageSync('app_id',data.app_id);
              Request.post('/exchange/app_log',{"app_id":data.app_id,"type":"in"});
            }

            if(record_id) {

              setTimeout(()=>{
                console.log(record_id,'跳转record_id');
                uni.navigateTo({
                  url:'/pages/tape/record?from=index&id=' + record_id
                });
              },1000)
            }
            //初始化数据

          console.log(data,'onload');
            //初始化数据
            for (var i = 0; i < this.swiperDateList.length; i++) {
                this.getDateList(i);
            }
        },

      onHide(){
        this.show=0;
        console.log('页面隐藏');
      },
      onUnload(){
        console.log('页面卸载');
      },
      onShow(){
        this.show=1;
        uni.setStorageSync('redirectTo','/pages/index/index');
        console.log('页面显示');
      },
      onShareAppMessage(res) {

        if (res.from === 'button') {// 来自页面内分享按钮
          console.log(res.target)
        }
        return {
          title: this.shareContent.title,
          path: this.shareContent.path,
          imageUrl:this.shareContent.thumb,
          desc:this.content,
        }
      },
      methods: {
            showAd(){
              // 在页面中定义插屏广告
              let interstitialAd = null

// 在页面onLoad回调事件中创建插屏广告实例
              if (wx.createInterstitialAd) {
                interstitialAd = wx.createInterstitialAd({
                  adUnitId: 'adunit-d6cf10a9a2bd51b9'
                })
                interstitialAd.onLoad(() => {
                  console.log('插屏广告成功');
                })
                interstitialAd.onError((err) => {
                  console.log('插屏广告失败');
                })
                interstitialAd.onClose(() => {})
              }

// 在适合的场景显示插屏广告
              if (interstitialAd) {
                interstitialAd.show().catch((err) => {
                  console.error(err)
                })
              }
            },
            share(param){
              console.log(param);
              this.shareContent = param;
            },

            swichMenu: async function (current) { //点击其中一个 menu

                if(current==3){
                    uni.navigateToMiniProgram({
                      appId: 'wx4ec12b5502a409da'
                    })
                    return false;
                }
                if (this.currentTab == current) {
                    return false;
                } else {
                    this.currentTab = current;
                    this.setScrollLeft(current);
                }
            },
            swiperChange: async function (e) {
                let index = e.target.current;
                this.setScrollLeft(index);
                this.currentTab = index;
            },
            setScrollLeft: async function (tabIndex) {
                let leftWidthSum = 0;
                for (var i = 0; i <= tabIndex; i++) {
                    let nowElement = await this.getWidth('tabNum' + i);
                    leftWidthSum = leftWidthSum + nowElement.width;
                }
                let winWidth = uni.getSystemInfoSync().windowWidth;
                this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
            },
            getWidth: function (id) { //得到元素的宽高
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
            changeTab(data){
              console.log(data);
                  this.currentTab=data;
            },
            loadMore: function (tabIndex) {
                console.log('正在加载更多数据。。。')
                this.getDateList(tabIndex);
            },
            getDateList: function (tabIndex) {
                for (var i = 0; i < 20; i++) {
                  if (!this.menuTabs[tabIndex])
                    break;
                    var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
                    this.swiperDateList[tabIndex].push(entity);
                }
            }
        }
    }
</script>

<style lang='scss'>
    /*page {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    align-items: flex-start;*/
    /*    justify-content: center;*/
    /*    background: rgba(255, 255, 255, 0);*/
    /*}*/

    .body-view {
        height: 100%;
        width: 100%;
    }
    .scroll_view{
        width: 100%;
        position: fixed;
        top: 0upx;
        left: 0upx;
        z-index: 100;
        height: 90upx;
        display: flex;
        align-items: center;
    }
    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;
        background-color: rgba(255,255,255,0);
        height: 100%;
        /* 在这里设置导航条高度 */
    }.top-menu-view2 {
        background-color: rgba(255,255,255,1);
        /* 在这里设置导航条高度 */
    }

    .top-menu-view .menu-one-view {
        display: inline-block;
        white-space: nowrap;
        width: 20%;
        height: 75upx;
    }

    .top-menu-view .menu-one-view .menu-one {
        /* 在这里写 单个按钮样式 */
        /*margin-left: 60upx;*/
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-txt {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight: $font-medium;
        color: $uni-color-664e37;
        line-height: 61upx;
    }.top-menu-view .menu-one-view .menu-one .menu-one-txt2 {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight:  $font-medium;
        color: #ffffff;
        opacity: 0.7;
        line-height: 61upx;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
        width: 60%;
        height: 4upx;
    }

    .top-menu-view .menu-one-view .menu-one-act {
        /* 在这里写 单个按钮样式 */
        /*margin-left: 60upx;*/
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight:  $font-medium;
        color: $uni-color-fcb300;
        line-height: 61upx;
    }
    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt2 {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight:  $font-medium;
        color: $uni-color-fcb300;
        /*opacity: 0.7;*/
        line-height: 61upx;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
        width: 32upx;
        height: 6upx;
        border-radius:4upx ;
        background: $uni-color-fcb300;
    }

    .swiper-box-list {
        flex: 1;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
    }

    .swiper-one-list {
        height: 100%;
        width: 100%;
    }

    .swiper-one-list .swiper-list-entity {
        width: 100%;
        height: 75upx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

</style>
